<template>
  <div>
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
    <ul>
      <!-- 循环加上key能提高性能 -->
      <li :key="item.id" v-for="(item,index) in myFruits">{{ item.cname }}------{{ item.id }}-------{{ item.ename }}</li>
    </ul>
    <!--遍历对象的属性-->
    <div>
      <div v-for="(value,key,index) in obj">{{ key }}---{{ value }}--{{ index }}</div>
    </div>

  </div>
</template>

<script>
export default {
  name: "TestVFor",
  data() {
    return {
      myFruits: [{
        id: '1',
        ename: 'apple',
        cname: '苹果'
      },
        {
          id: '2',
          ename: 'orange',
          cname: '橘子'
        },
        {
          id: '3',
          ename: 'banana',
          cname: '香蕉'
        }
      ],
      todos: [
        {text: '学习 JavaScript'},
        {text: '学习 Vue'},
        {text: '整个牛项目'}
      ],
      obj: {
        username: 'zhangsan',
        age: '16',
        gender: 'male'
      }
    }
  }
}
</script>

<style scoped>

</style>
